<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">    <title>02文本的换行</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        #wordBreak textarea{
            width: 200px;
            height: 200px;
            word-break: break-all;/*从单词任意位置打断*/
        }

        #wordkeep textarea{
            width: 200px;
            height: 200px;
            word-break: keep-all;/*保持中文一句话的完整，有标点才能换行*/
        }

        #wordWrap textarea{
            width: 200px;
            height: 200px;
            word-wrap: break-word;/*网址或长单词的换行跟normal不太一样，但没发现不用能出现滚动条*/
        }
    </style>
</head>
<body>
<h1>2-1文本的换行</h1>
<h3>从任意地方可以打断的换行</h3>
<code>word-break: break-all;</code>
<section id="wordBreak">
    <textarea>
        这是一段测试换行的文字！这是段测试换行文字！这是段测试换行文字！verylong word! veryvery-verylong word!
        veryveryveryverylong word!
    </textarea>
</section>
<h3>保持中文一句话完整的换行</h3>
<code>word-break: keep-all;</code>
<section id="wordkeep">
    <textarea>
        这是一段测试换行的文字！这是段测试换行文字！这是段测试换行文字！verylong word! veryvery-verylong word!
        veryveryveryverylong word!
    </textarea>
</section>
<h3>保持单词和长网址的完整才换行，据说网址太长会出现滚动条，但目前没发现！</h3>
<code>word-wrap: break-word;</code>
<section id="wordWrap">
    <textarea>
        这是一段测试换行的文字！这是段测试换行文字！这是段测试换行文字！verylong word! veryvery-verylong word!
        这是一段测试换行的网址！https://xutsing.teamwork.com/tasks/9612567?c=4430759
        veryveryveryverylong word!
    </textarea>
</section>
</body>
</html>